//--变量（）

//变量用来存储css中需要复用的信息
//SASS和SCSS通过$符号去声明一个变量
$font-color: #007AFF;
$radius: 10px;
//变量的作用域
//less的变量符号为 @color: #0000cc;
//scss的变量符号为 $color：#0000cc;

//less的作用域更类似于js 类似于闭包，局部变量覆盖全局变量
//scss的作用域则是全为 定义在选择器之内的变量为局部变量，定义在选择器之外的为全局变量。
					//在局部作用域内 同名局部变量会覆盖全局变量

//less没有输出设置
//scss提供了四种输出设置：nested,compact,compressed,expanded;
					//nested:嵌套缩进的css代码
					//expanded:展开的多行css代码
					//compact:简洁格式的css代码
					//compressed:压缩后的css代码

//less不支持if{}else{}，for(){}语句
//scss支持if{}else{}，for(){}语句

//Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写
//Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

h1 {
	$font-color: #0000cc;
	color: $font-color;//css属性变量的引用
}

ul {
	padding: 0;
	.yesBtn {
		color: $font-color;
		background-color: $font-color;
	}
}

//--额外scss文件的引入

// _scss.scss 前加 _ 线的scss文件在编译时不会主动去编译除非遇到其它文件@import引入改文件
//例如：scss.scss 该文件没有加 _ 线时，去编译就会自动生成 scss.css 的文件，而加 _ 线时去编译时就不会生成 scss.css 文件。
@import "scss";

//_reset.scss
html, body, ul, ol {
	margin: 0;
	padding: 0;
}

//--混合（Mixin--@mixin）
//@include 调用 @mixin 定义的 scss 函数并传递参数
@mixin border-radius($radius) {
	border-radius: $radius;
	-ms-border-radius: $radius;
	-moz-border-radius: $radius;
	-webkit-border-radius: $radius;
}

//eg:
.box {
	@include border-radius($radius);
}
//or .box {@include border-radius(10px);} //同样也可以 border-radius()则相当于一个函数了

//--继承（@extend）
%message_father {
	border: 1px block solid;
	color: #333;
}
.message {
	@extend %message_father;
}
.message_child1 {
	@extend %message_father;
	font-family: 900;
}

